

import React, { Component,PropTypes } from 'react';

import {
    View,
	Text,
	TouchableWithoutFeedback,
	StyleSheet,
	ScrollView,
	Animated
} from 'react-native';

const NativeMethodsMixin = require('react/lib/NativeMethodsMixin');
import InteractionManager from 'InteractionManager';
var Platform = require('Platform');

export default class ListMenuBar extends Component {
	constructor() {
		super();
		this.isInitial = false;
		this.delayAction = undefined;
		this.tab_height = 35;
		this.widths = Immutable.fromJS({});
		this.gOffectXs = Immutable.fromJS({});
	}
	static propTypes = {
		menuCallBackAction: React.PropTypes.func,
		menuItems: React.PropTypes.object,
		titleKey: React.PropTypes.string.isRequired,
		avgMaxNum: React.PropTypes.number,
	};
	static defaultProps = {
		menuItems: undefined,		
		avgMaxNum: 4,
	};
	mixins: [NativeMethodsMixin];
	state={
		activeIndex: 0,
		scrollValue: new Animated.Value(0),
		lineWidthValue: new Animated.Value(0),
		textColorAnimate: new Animated.Value(0),
	};
	shouldComponentUpdate(nextProps, nextState) {
		return true;
	}

	_handleAction = (index)=> {
		InteractionManager.runAfterInteractions(()=>{
			Animated.parallel([
				Animated.timing(  
					this.state.scrollValue,
					{
						toValue: this.gOffectXs.get(index),
						duration:250,
					} 
				),
				Animated.timing(  
					this.state.lineWidthValue,
					{
						toValue: this.widths.get(index),
						duration:250,
					})
				 ]).start(()=>{
				 	this.setState({activeIndex: index});
				 	this.props.menuCallBackAction && this.props.menuCallBackAction(index);
				 });
			
				var t = this.gOffectXs.get(index);
				if (index > 0 && this.props.menuItems.size > this.props.avgMaxNum) {
					if (t > Common.size.width) {
					this.refs.scrollRef && this.refs.scrollRef.scrollTo({y:0,x:t});
					};
				} else {
					this.refs.scrollRef && this.refs.scrollRef.scrollTo({y:0,x:0});
				}	
		});
	};
	clickAction=(index)=>{
		if (!this.props.menuItems || this.props.menuItems.size == 0 ) {return;}
		if (!this.isInitial) {
			this.delayAction=true;
			return;
		};
		if (index == this.state.activeIndex) {
			this.props.menuCallBackAction && this.props.menuCallBackAction(index);
			return;			
		}
		this._handleAction(index);
			
	};
	
	render() {
		var content;
		if (!this.props.menuItems || this.props.menuItems.size==0) {
			return <View></View>;
		}
		var lineColor = '#00bfff'?'#00bfff':'#cbcbcb';
		var tabUnderlineStyle = [styles.line,{backgroundColor:lineColor},{top: this.tab_height-2}];
		var nLeft = this.state.scrollValue;
		var textStyles = [styles.item_text];
		if (this.props.menuItems.size > this.props.avgMaxNum) {
			var menus = this.props.menuItems.map((menu, index)=> {
			
			return (<TouchableWithoutFeedback 
				key={index} 	
				onPress={()=>this.clickAction(index)}>
				<View ref={'item_view'+index} style={styles.item_view}>
				<Text numberOfLines={1} style={textStyles} onLayout={(event)=>{
					
					this.widths = this.widths.set(index, event.nativeEvent.layout.width);
					var x = 0;
					if (this.widths.size == this.props.menuItems.size && this.gOffectXs.size == 0) {
						var keys =this.widths.keySeq().sort();
						keys.forEach((index)=>{
							if (index == 0) {
								this.gOffectXs = this.gOffectXs.set(index, 0);
							} else {
								this.gOffectXs = this.gOffectXs.set(index, 
									this.gOffectXs.get(index-1) + this.widths.get(index-1));
							}
						});
						this.isInitial = true;

						if (this.delayAction == true) {
							this.clickAction(0);
						};
					}
					}}>{menu.get(this.props.titleKey)||''}</Text>
				</View>
				</TouchableWithoutFeedback>);
			});
		} else if (this.props.menuItems.size > 0) {
			var w=Common.size.width/this.props.menuItems.size;
			var menus = this.props.menuItems.map((menu, index)=> {

			this.widths = this.widths.set(index, w);
			
			textStyles.push({width: w});
			return (<TouchableWithoutFeedback 
				key={index} 
				onPress={()=>this.clickAction(index)}>
				<View ref={'item_view'+index} style={styles.item_view}>
					<Text style={[textStyles,(this.state.activeIndex == index?{color:'#00bfff'}:{})]}>{menu.get(this.props.titleKey)||''}</Text>
				</View>

				</TouchableWithoutFeedback>);
			});
			this.widths.valueSeq().forEach((value, index, all) => {
				if (index == 0) {
					this.gOffectXs = this.gOffectXs.set(index, 0);
				} else {
					this.gOffectXs = this.gOffectXs.set(index,
									this.gOffectXs.get(index-1) + all.get(index-1));
				}
			});
			this.isInitial = true;
		}

		content = (<View style={[styles.content, {height: this.tab_height}]}>
			{menus}
			<Animated.View style={[tabUnderlineStyle,{left: nLeft, width: this.state.lineWidthValue,backgroundColor: '#00bfff'}]} />
			</View>);

		return (
			<ScrollView
			ref='scrollRef'
			style={[styles.scroll,{height: this.tab_height+2}]}
			contentContainerStyle={{height: this.tab_height}}
			horizontal={true}
			showsHorizontalScrollIndicator = {false}
			automaticallyAdjustContentInsets={false}>
			{content}
			</ScrollView>);
	}
}

var styles = StyleSheet.create({	
	scroll: {
		flex: 0,
		marginBottom: 1,
		backgroundColor:'#fefefe', 
		overflow:'hidden',
		borderTopWidth: 1,
		borderTopColor:'#ededed',
		borderBottomWidth: 1,
		borderBottomColor:'#ededed',
		paddingLeft: as(3),
		paddingRight: as(3),

	},
	content: {
		flex: 1, 
		flexDirection: 'row',
		backgroundColor: 'transparent',
		marginBottom: as(2),
		marginLeft:0,
		paddingLeft:0,

	},
	item_view: {
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor:'transparent',
	},
	item_text: {
		paddingLeft: as(5),
		paddingRight: as(5),
		fontSize: 14,
		lineHeight: 16,
		height: asFontHeight(14, 1, 16),
		textAlign: 'center',
	},
	line: {
		position: 'absolute',
		height: 2,

		left: 0,
		marginLeft:0,
		paddingLeft:0,
	}
});